<!--
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-17 22:48:58
 * @LastEditTime: 2022-05-20 10:53:56
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 创建文章
-->
<template>
  <div class="article-create">
    <el-card>
      <el-input
        class="title-input"
        :placeholder="$t('article.titlePlaceholder')"
        v-model="title"
        maxlength="20"
        clearable
      >
      </el-input>
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="$t('article.markdown')"
          name="markdown"
        >
          <markdown @submit="onSubmit" :details="details"></markdown>
        </el-tab-pane>
        <el-tab-pane
          :label="$t('article.richText')"
          name="editor"
        >
          <editor @submit="onSubmit" :details="details"></editor>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import Editor from './components/Editor.vue'
import Markdown from './components/Markdown.vue'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { submit, edit } from './components/commit'
import { getArticleDetail } from '@/api/article'
const route = useRoute()
const paramId = route.params.id

const activeName = ref('markdown')
const title = ref('')

onMounted(() => {
  if (paramId) {
    getDetail()
  }
})

const onSubmit = (content, cb) => {
  if (paramId) {
    edit({
      id: paramId,
      title: title.value,
      content
    }, cb)
  } else {
    submit({
      title: title.value,
      content
    }, cb)
  }
  title.value = ''
}
// 获取文章详情
const details = ref({})
const getDetail = async () => {
  const res = await getArticleDetail(paramId)
  details.value = res
  title.value = res.title
}

</script>

<style lang="scss" scoped>
.title-input {
  margin-bottom: 20px;
}
</style>
